<template>
	<div id="sharing">
		<div class="header">
			<div class="icon-left" @click="back"><img src="../../../static/img/icon/release_icon/return@2x.png"/></div>
			<div>发布帖子</div>
			<div class="submit" @click="submit">发布</div>
		</div>
		<div class="header-null"></div>
		<div class="label">
			<div class="label-title">选择标签</div>
			<div class="label-list">
				<div :class="{'label-list-item': true, 'active': item.status}" v-for="item in list" @click="item.status = !item.status">
					{{item.name}}
				</div>
			</div>
			<div class="title">
				<input type="" name="" id="" value="" placeholder="请输入标题" v-model="title"/>
			</div>
		</div>
		<div class="bottom">
			<div class="content">
				<textarea placeholder="请输入内容" rows="6" v-model="content"/>
			</div>
			<div class="updata">
				<div class="imgs" v-for="(item, index) in imgs">
					<img :src="item"/>
					<img src="../../../static/img/icon/denglu_gengxin_icon/guanbi@3x.png" @click="deleted(index)"/>
				</div>
				<div>
					<img src="../../../static/img/icon/my_icon/camera@3x.png"/>
					<input type="file" @change="fileImg($event)"/>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {getData} from '../../service/getData'
	export default {
		data() {
			return {
				list: [],
				title: '',
				imgs: [],
				content: ''
			}
		},
		methods: {
			back() {  //返回
				var _this = this
				mui.confirm('帖子尚未发布,是否确定返回',['取消','确定'],function(status) {
					if(status.index == 1) {
						_this.$router.goBack()
					}
				},'div')
			},
			fileImg(ev) {  //选择图片
				var _this = this
				var reader = new FileReader();
				reader.readAsDataURL(ev.target.files[0]);
				reader.onload=function(e) {
			        _this.imgs.push(e.target.result);
			    };
			},
			deleted(index) {  //删除图片
				this.imgs.splice(index, 1)
			},
			init() {  //默认加载
				getData('/note/appFindAllTag', {
					token: sessionStorage.token
				}).then(d => {
					d.tagList.map(x => {
						x.status = false
					})
					this.list = d.tagList
				})
			},
			submit() { //发布
				let ids = ''
				this.list.map(x => {
					if(x.status) {
						ids += x.tagId + ','
					}
				})
				let imgs = ''
				this.imgs.map(x => {
					imgs = x.split(',')[1] + ','
				})
				getData('/note/appAddNote', {
					type: 2,
					tagID: 1,
					topicID: 0,
					chooseID: 0,
					img: imgs,
					noteName: this.title,
					noteContent: this.content,
					token: sessionStorage.token
				}).then(d => {
					if(d.code == 100) {
						mui.toast(d.msg)
						this.$router.go(-2)
					} else {
						mui.toast(d.msg)
					}
				})
			}
		},
		mounted() {
			this.init()
		}
	}
</script>

<style scoped lang="less">
	#sharing {
		background: #fff;
	}
	
	.submit {
		color: #7B7B7B;
		font-size: 13px;
	}
	
	.label {
		padding: 10px 10px 0;
		background: #fff;
		border-bottom: 1px solid #eee;
		
		.label-title {
			margin-bottom: 10px;
		}
		
		.label-list {
			display: flex;
			flex-wrap: wrap;
			
			.label-list-item {
				padding: 2px 20px;
				margin: 0 5px 5px 0;
				color: #fff;
				background: #E5E5E5;
			}	
			
			.active {
				background: #c9eb59 !important;
			}
		}
		
		.title {
			padding: 10px 0;
			
			input {
				font-size: 13px;
			}
		}
	}
	
	.bottom {
		padding: 0 10px;
		background: #fff;
		
		.content {
			padding: 10px 0;
			
			textarea {
				margin: 0;
				padding: 0;
				font-size: 13px;
			}
		}
		
		.updata {
			display: flex;
			flex-wrap: wrap;
			
			.imgs {
				position: relative;
				
				img:last-child {
					position: absolute;
					right: -8px;
					top: -5px;
					width: 18px;
					height: 18px;
				}
			}
			
			div:last-child {
				position: relative;
				
				input {
					position: absolute;
					top: 0;
					left: 0;
					width: 80px;
					height: 80px;
					opacity: 0;
				}
			}
			
			img {
				width: 80px;
				height: 80px;
				margin: 0 10px 10px 0;
			}
		}
	}
</style>